<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            /* 静态定位 普通文档流的形式 */
            position: static;
            background-color: red;
        }

        .two {
            /* width: 100px;
            height: 100px; */
            /* 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。 
            position: relative; */
            /* 绝对定位的元素的位置相对于最近的已定位祖先元素 */
            /* position: absolute; */
            /* top: 20px;
            left: 50px; */
            /* bottom: 10px; */
            /* right: 10px; */
            background-color: green;
            right: 0px;
            bottom: 0px;
            position: absolute;
        }

        .three {
            position: relative;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
</body>

</html>